<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>style</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        .activeRed{
            background-color: red;
        }
        .activeGreed{
            background-color: green;
        }
        .aver{
            width: 320px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="app" class="aver" v-bind:class="{activeRed:isRed,'text-danger':hasError,activeGreed:isGreen}">div</div>
    <button @click="isRedFun" style="color: red">red</button><br>
    <button @click="isGreenFun" style="color:green">green</button><br>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            isRed:false,
            isGreen:true,
            hasError:false,
            aver:true
        },
        methods:{
            isRedFun:function () {
                this.isRed = true
            },
            isGreenFun:function () {
                this.isGreen = true
            }
        }
    })
</script>
</html>